<!-- 汇总报表 -->
<template>
  <div class="quality-box">
    <div class="top-title">
      <div class="left-txt">指标监控</div>
      <div class="date">
        <span class="desc">手术日期</span>
        <el-date-picker
          v-model="currentDate"
          @change="changeDate"
          type="year"
          :clearable="false"
          placeholder="请选择年份"
          format="yyyy"
          value-format="yyyy"
        />
      </div>
    </div>
    <div class="surgery-type">
      <el-tabs v-model="type">
        <el-tab-pane label="主动脉腔内修复术" name="1" />
      </el-tabs>
    </div>
    <div
      class="sea_main_con"
      @mouseenter="onMouseover"
      @mouseleave="onMouseout"
    >
      <div>
        <ul
          class="list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
          infinite-scroll-distance="20"
        >
          <li
            v-for="(item, index) in sayLists"
            :key="index"
            class="info-list"
            :class="{ 'margin-0': index == 0 }"
          >
            <template v-if="item.isNull == false">
              <div class="pie-box">
                <PieChart :chartData="item.pieData" :title="item.titles" />
              </div>
              <div class="bar-box">
                <BarChart :chartData="item.barData" />
              </div>
            </template>
            <template v-else>
              <div class="is-null">
                <div class="title-box">{{ item.titles }}</div>
                <div class="no-content">暂无数据</div>
              </div>
            </template>
          </li>
        </ul>
        <div class="load_icon">
          <p style="margin-top: 10px" v-if="loading && noMore == false">
            加载中<i class="el-icon-loading"></i>
          </p>
          <p style="margin-top: 10px" v-if="noMore">没有更多了</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from '@/utils/js/debounce';
import { timeMode } from '@/utils/js/util';
import PieChart from '@/components/pie';
import BarChart from '@/components/bar';
export default {
  components: { PieChart, BarChart },
  name: 'HospitalReportDetail',
  data() {
    return {
      yearData: '',
      type: '1',
      pieData: [],
      barData: [],
      count: 0,
      loading: false,
      seen: true,
      currentDate: timeMode(new Date()).dateYear,
      sayLists: [],
      surgeryList: [
        [1, '主动脉腔内修复术住院死亡率', 'isDead', '正常', '死亡'],
        [
          2,
          '主动脉腔内修复术后机械通气时间>=24小时发生率',
          'projJx',
          '正常',
          '>=24小时',
        ],
        [
          3,
          '主动脉腔内修复术非计划二次手术率',
          'projEc',
          '正常',
          '非计划二次手术',
        ],
        [4, '主动脉腔内修复术后内漏发生率', 'projNl', '正常', '术后发生内漏'],
        [5, '主动脉腔内修复术后脑卒中发生率', 'projNz', '正常', '术后脑卒中'],
        [
          6,
          '主动脉腔内修复术后急性肾衰竭发生率',
          'projSs',
          '正常',
          '术后急性肾衰竭',
        ],
        [
          7,
          '主动脉腔内修复术后脊髓损伤发生率',
          'projJs',
          '正常',
          '术后脊髓损伤',
        ],
        [
          8,
          '主动脉腔内修复术后心肌梗死发生率',
          'projXg',
          '正常',
          '术后心肌梗死',
        ],
        [
          9,
          '主动脉腔内修复术前β受体阻滞剂使用率',
          'projBz',
          '术前未使用β受体阻滞剂',
          '术前使用β受体阻滞剂',
        ],
        [
          10,
          '主动脉腔内修复术前他汀类药物使用率',
          'projTl',
          '术前未使用他汀类药物',
          '术前使用他汀类药物',
        ],
        [
          11,
          '主动脉腔内修复术后30天随访率',
          'projSf',
          '术后30天未随访',
          '术后30天随访',
        ],
        [
          12,
          '主动脉腔内修复术30天内CTA复查率',
          'projFc',
          '术后30天内CTA未复查',
          '术后30天内CTA复查',
        ],
      ],
    };
  },
  computed: {
    noMore() {
      return this.sayLists.length >= 12;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //改变时间
    changeDate(val) {
      if (val) {
        this.count = 0;
        this.sayLists = [];
        this.load();
      }
    },
    load: debounce(function () {
      if (this.count < 12) {
        this.loading = true;
      }
      setTimeout(() => {
        if (this.count < 12) {
          let indexType = [
            this.surgeryList[this.count][0],
            this.surgeryList[this.count + 1][0],
          ];
          let params = {
            year: this.currentDate,
            indexType,
          };
          this.$http
            .systemShowHospitalReport(params)
            .then(res => {
              this.loading = false;

              if (res.code == '0000000000') {
                this.count += 2;
                res.data.list.forEach(item => {
                  var deadNum = item.data.reduce(function (
                    total,
                    currentValue
                  ) {
                    return total + currentValue.deadNum;
                  },
                  0);
                  var normalNum = item.data.reduce(function (
                    total,
                    currentValue
                  ) {
                    return total + currentValue.normalNum;
                  },
                  0);
                  let sumAll = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                  item.data.forEach(items => {
                    sumAll[items.monthNum - 1] =
                      items.normalNum + items.deadNum;
                  });
                  let deadNums = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                  item.data.forEach(items => {
                    deadNums[items.monthNum - 1] = items.deadNum;
                  });
                  let title = '';
                  let tip = [];
                  this.surgeryList.forEach(items => {
                    if (items[2] == item.project) {
                      title = items[1];
                      tip = [items[3], items[4]];
                    }
                  });
                  let isNull = false;
                  if (
                    deadNum == 0 &&
                    normalNum == 0 &&
                    sumAll.every(item => {
                      return item == 0;
                    }) &&
                    deadNums.every(item => {
                      return item == 0;
                    })
                  ) {
                    isNull = true;
                  }
                  let params = {
                    pieData: [
                      {
                        name: tip[0],
                        value: normalNum,
                      },
                      {
                        name: tip[1],
                        value: deadNum,
                      },
                    ],
                    barData: [
                      {
                        name: tip[1],
                        value: deadNums,
                      },
                      {
                        name: '总人数',
                        value: sumAll,
                      },
                    ],
                    titles: title,
                    isNull,
                  };
                  this.sayLists.push(params);
                });
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: 'error',
                });
              }
            })
            .catch(() => {});
        } else {
          this.loading = false;
        }
      }, 1000);
    }, 1000),
    onMouseover() {
      this.seen = true;
    },
    onMouseout() {
      this.seen = false;
    },
  },
};
</script>
<style lang="less" scoped>
.quality-box {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .top-title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #111111;
    display: flex;
    justify-content: space-between;
    line-height: 32px;
    height: 32px;
    /deep/.el-input__inner {
      width: 240px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #dcdee0;
      line-height: 32px;
    }
    /deep/ .el-input__icon {
      line-height: 32px;
      height: 32px;
    }
    .date {
      display: flex;
      width: 312px;
      .desc {
        margin-right: 16px;
      }
    }
    .left-txt {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
    }
  }
  .surgery-type {
    padding: 8px 16px 0px 16px;
    background: #ffffff;
    margin-top: 13px;
    /deep/.el-tabs__header {
      margin-bottom: 8px;
    }
    /deep/.el-tabs__nav-wrap::after {
      width: 0;
    }
    /deep/.el-tabs__active-bar {
      width: 40px !important;
      left: 40px;
    }
    /deep/.is-active {
      width: 126px;
      height: 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #323233;
      line-height: 28px;
    }
  }
  .info-list {
    display: flex;
    padding: 16px;
    height: 455px;
    margin-top: 16px;
    background: #ffffff;
    box-sizing: border-box;
    .pie-box {
      width: 440px;
    }
    .bar-box {
      display: flex;
      flex: 1;
    }
  }
}
.sea_main_con {
  width: 100%;
  height: 735px;
  overflow-y: scroll;
  margin-top: 16px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
.load_icon {
  width: 100%;
  height: 30px;
  text-align: center;
}
.margin-0 {
  margin-top: 0 !important;
}
.el-date-editor {
  /deep/.el-input__prefix {
    position: absolute;
    width: fit-content;
    left: 210px;
  }
}
/deep/.el-input__inner {
  padding-left: 15px;
}
.no-content {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.is-null {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  .no-content {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .title-box {
    position: absolute;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #323233;
  }
}
</style>
